<!-- 获取入住记录 -->
<template>
	<a-modal v-bind="options" title="入住记录">
		<vxe-grid ref="grid" v-bind="gridOptions">
			<template #bookStatus="{row}">
				<div>{{ row.status === 1 ? '已入住' : '搬离' }}</div>
			</template>
			<template #familiarProjects="{row}">
				<div>{{ row.communityName }}</div>
			</template>
			<template #houseType="{row}">
				<div>{{ option[row.houseType] }}</div>
			</template>
			<template #signDate="{row}">
				<div>{{ row.checkInBeginTime || '--' }} ~ {{ row.checkInEndTime || '--' }}</div>
			</template>
			<template #price="{row}">
				<div>
					{{ row.price.toFixed(2) }}
					<!-- <span v-show="Number(row.price) > 1">.00</span> -->
				</div>
			</template>
		</vxe-grid>
	</a-modal>
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, watch} from 'vue'
	import {checkInRecordsF} from '@/api/staff-pool'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	const emits = defineEmits(['update:visible', 'close', 'refurbish'])

	const props = defineProps<{
		visible: boolean
		employeeId: string | null
		// id: string
	}>()

	const options = reactive({
		width: 1200,
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			// setTimeout(() => emits('close'), 100)
		},
		onOk() {
			console.log(1)
		}
	})

	const option = reactive({
		1: '整租',
		2: '合租',
		3: '集中',
		4: '民宿'
	})

	const gridOptions = reactive<VxeGridProps>({
		height: '300',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		columns: [
			{
				title: '入住状态',
				width: 100,
				slots: {
					default: 'bookStatus'
				}
			},
			{
				title: '所属项目',
				width: 150,
				// field: 'familiarProjects'
				slots: {
					default: 'familiarProjects'
				}
			},
			{
				title: '房源类型',
				width: 100,
				slots: {
					default: 'houseType'
				}
			},
			{
				title: '房源地址',
				width: 200,
				field: 'fullAddress'
				// slots: {
				// 	default: 'houseAddress'
				// }
			},
			{
				title: '入住周期',
				width: 200,
				slots: {
					default: 'signDate'
				}
			},
			{
				title: '租金',
				width: 100,
				slots: {
					default: 'price'
				}
			},
			{
				title: '入住时间',
				width: 150,
				field: 'checkInBeginTime'
				// slots: {
				// 	default: 'checkInTime'
				// }
			},

			{
				title: '搬离时间',
				width: 150,
				field: 'moveTime'
			}
		],
		pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return checkInRecordsF({current, size, employeeId: props.employeeId})
				}
			}
		}
	})
</script>

<style scoped></style>
